<template>
  <div class="container-width">
    <div class="custom-slider bgc-white pad-20 mar-b-10 mar-t-30">
      <div class="flex flex-baseline mar-t-2">
        <span class="font-32 font-color-3 font-w pad-r-20">{{ content.propMap.mainTitle || '买手精选' }}</span>
        <div class="font-16 font-color-6 flex tab-box">
          <span class="mar-r-15">{{ content.propMap.subTitle }}</span>
        </div>
      </div>
      <!-- <div class="font-14 tabs-link mar-t-19">
        <span :class="recommendIndex ? '' : 'actived'" @click="recommendEls(0)">每日新款</span>
        <span :class="recommendIndex === 1 ? 'actived' : ''" @click="recommendEls(1)">实力卖家</span>
        <span :class="recommendIndex === 2 ? 'actived' : ''" @click="recommendEls(2)">买手精选</span>
        <span :class="recommendIndex === 3 ? 'actived' : ''" @click="recommendEls(3)">找档口</span>
      </div> -->
      <div class="height-7" />
      <div class="clear-both" />
      <div class="flex flex-wrap mar-t-16 mar-r--20 mar-b--10 goods-list">
        <div class="swiper-le mar-r-20 mar-b-20">
          <el-carousel height="302px" arrow="never" class="carousel">
            <el-carousel-item v-for="(itemSwiper, indexSwiper) in content.guideList" :key="indexSwiper">
              <img :src="itemSwiper.imgUrl" alt="" class="swiper-img cursor-p" @click="handleJumpPage(itemSwiper)">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div v-for="(itemGoods, indexGoods) in content.goodsList" :key="indexGoods"
          class="goods-bar mar-r-20 mar-b-20 cursor-p position-r" @click="goodsEls(itemGoods)">
          <el-image class="image" :src="itemGoods.imgUrl" lazy />
          <div class="goods-info font-white">
            <div class="flex flex-between">
              <div class="_line-1">{{ itemGoods.title }}</div>
            </div>
            <div class="flex flex-between v-align-c pad-t-6">
              <div class="price font-16 font-w">￥{{ itemGoods.distributePrice || '0.00' }}</div>
              <div class="font-12 btn-goods font-white border-radius-2">铺货</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onMounted
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import {
    jumpPage
  } from '@/utils/jumpPageUtils'
  import iconMore from '@/assets/images/icon_more_circle.png'
  export default defineComponent({
    name: 'CustomSliderThird',
    props: {
      content: {
        type: Object,
        default: () => ({})
        // type: Array,
        // default: () => []
      }
    },
    setup() {
      const router = useRouter()
      const recommendIndex = ref(0)
      onMounted(() => {})
      const recommendEls = (val: number) => {
        recommendIndex.value = val
      }
      const goodsEls = (item: any) => {
        jumpPage(router, 1, 1, 2001, '?goodsId=' + item.goodsId, 1)
      }
      const handleJumpPage = (item: any) => {
        jumpPage(router, item.hasLink, item.linkTarget, item.linkType, item.linkParams, item.newPage)
      }
      return {
        iconMore,
        recommendIndex,
        recommendEls,
        goodsEls,
        handleJumpPage
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  $goodsWidth: 210px;

  .custom-slider {
    .tab-box {
      position: relative;
      top: 2px;
    }

    .s-img {
      .el-image {
        width: 264px;
        height: 368px;
        margin-right: 10px;
        cursor: pointer;
      }
    }

    .tabs-link {
      span {
        padding: 3px 8px;
        margin-right: 13px;
        cursor: pointer;
        color: #666;

        &.actived {
          color: #fff;
          background: $darkBlue;
          border-radius: 20px;
        }
      }
    }

    .swiper-le {
      width: 670px;

      ::v-deep(.carousel) {
        &.el-carousel {
          --el-carousel-indicator-width: 10px;
          --el-carousel-indicator-height: 10px;

          .el-carousel__button {
            border-radius: 50px;
          }

          .el-carousel__indicators--horizontal {
            left: unset;
            right: 0;
          }
        }
      }
    }

    .el-carousel__item {
      text-align: center;
    }

    .swiper-img {
      width: 670px;
      height: 302px;
    }

    .goods-list {
      .goods-bar {
        width: $goodsWidth;
      }

      ::v-deep(.image) {
        display: block;
        width: $goodsWidth;
        height: 302px;
      }

      .goods-info {
        width: $goodsWidth;
        // height: 142px;
        padding: 4px 8px 8px 8px;
        box-sizing: border-box;
        overflow: hidden;
        position: absolute;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
      }

      ._line-1 {
        /* line-height: 1.4; */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-word;
      }

      ._line-2 {
        /* line-height: 1.4; */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-word;
      }

      .btn-goods {
        background: #2de2dd;
        padding: 0 12px;
        height: 24px;
        line-height: 24px;
      }
    }
  }
</style>
